<template>
  <Modal
      v-bind="modalProps"
      @ok="handleOk"
      @cancel="handleCancel"
  >
    <ModalForm ref="form"></ModalForm>
  </Modal>
</template>

<script lang="ts">
export default {
  name: "CarouselModal"
}
</script>

<script setup lang="ts">
import {nextTick, onMounted, reactive, ref} from "vue"
import Modal from '@/components/Modal.vue'
import ModalForm from '@/components/ModalForm.vue'
import {CarouselEditType, CarouselListType, CarouselSaveType} from '@/view/shopping/carousel/carouselType'
import {ModalFormInitType} from '@/type/ModalFormType'
import {ums_carousel_save, ums_carousel_update} from '@/api/sms'
import useMsg from '@/hooks/useMsg'

const {success, error} = useMsg()

const emit = defineEmits<{
  (e: 'list'):void
}>()

const modalProps = reactive({
  title: "",
  show: false,
})
const type = ref<0|1>(0)

const formData = reactive<CarouselEditType>({
  carousel_name: "",
  carousel_order: 0,
  carousel_img: "",
  carousel_url: "",
  id: null
})

const form = ref<{
  init: (data: ModalFormInitType[]) => void
  validate: () => Promise<CarouselSaveType>
}>()

function init (data?: CarouselListType) {
  if (data) {
    type.value = 1
    modalProps.title = "编辑"
    let key: keyof CarouselEditType;
    for (key in formData) {
      formData[key] = data[key]
    }
  }else {
    type.value = 0
    modalProps.title = "添加"
  }
  modalProps.show = true
  nextTick(() => {
    form.value?.init([
      {
        type: "input",
        label: "名称",
        key: "carousel_name",
        value: data?.carousel_name,
        rules: {
          required: true,
          message: "请输入轮播图名称",
          trigger: "change",
        },
      },
      {
        type: "input",
        label: "地址",
        key: "carousel_url",
        value: data?.carousel_url,
        rules: {
          required: true,
          message: "请输入轮播图地址",
          trigger: "change",
        }
      },
      {
        type: "number",
        label: "排序",
        key: "carousel_order",
        value: data?.carousel_order,
        rules: {
          type: "number",
          required: true,
          message: "请输入排序数字",
          trigger: "change",
        }
      },
      {
        type: 'upload',
        label: "上传图片",
        key: "carousel_img",
        value: data?.carousel_img,
        rules: {
          required: true,
          message: "请上传轮播图图片",
          trigger: "change",
        }
      }
    ])
  })
}

const handleCancel = () => {
  modalProps.show = false
}

const handleOk = () => {
  form.value?.validate().then((data) => {
    if (type.value === 0) {
      ums_carousel_save( data ).then( res => {
        if (res.code === 200) {
          success( res.message )
          handleCancel()
          emit( "list" )
        } else {
          error( res.message )
        }
      } )
    }
    if (type.value === 1) {
      ums_carousel_update({
        ...formData,
        ...data
      }).then(res => {
        if (res.code === 200) {
          success( res.message )
          handleCancel()
          emit( "list" )
        } else {
          error( res.message )
        }
      })
    }
  })
}

defineExpose({
  init
})


onMounted( () => {
} )
</script>

<style scoped lang="scss">

</style>
